<template>
  <div class="index-container">
    <div class="main-header">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="fr">
            <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="selectArr.includes(tag.id)"
              :color="selectArr.includes(tag.id) ? tag.color : ''"
              size="medium"
              :class="{ active: selectArr.includes(tag.id) }"
              :data-id="tag.id"
              @click="handleFilter"
              @close="handleClose(tag.id)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card-container">
      <el-tabs
      v-model="activename"
      type="border-card"
      @tab-click="handleSelectBuilding"
    >
      <el-tab-pane
        v-for="(item, index) in buildingData"
        :key="index"
        :datafloorid="item.id"
        :name="item.name"
        :label="item.name"
      >
        <el-tabs
          v-model="flooractivename"
          type="card"
          tab-position="left"
          @tab-click="handleTabFloorClick"
        >
          <el-tab-pane
            v-for="(ite, idx) in floorData"
            :key="idx"
            :label="ite.name"
            :datafloorid="ite.id"
            :name="ite.name"
            style="min-height: 400px"
          >
            <el-row :gutter="30">
            <template v-for="floor in bedPageDataList">
                <div :key="floor.id" :class="floor.bed_list.length == 7 ? 'bed-list-wrap7' : floor.bed_list.length == 3 ? 'bed-list-wrap3' : 'bed-list-wrap2'">
                  <el-col v-for="bed in floor.bed_list" :key="bed.id" class="bed-el-col" :xs="6" :sm="6" :md="6" :lg="6" :xl="4">
                    <el-card
                      shadow="hover"
                      :class="backgroundColor[(bed.bed_wets_value == 1 || bed.is_wet == 1 || (floor.room_code == '202' && quanhuobj.color == 2 && bed.bed_code == '01') ? 1 : floor.room_code == '202' && bed.bed_code == '01' && zhongzhengobj.value1 != 1 ? 2 : 0 )]"
                      @click.native="handleCardInfo"
                    >
                      <div slot="header" class="header clearfix">
                        <span v-if="floor.room_code == '202' && bed.bed_code == '01'">失能失智照护培训室{{bed.bed_code}}床</span>
                        <span class="fl">{{floor.room_code}}房{{bed.bed_code}}床</span>
                        <!-- <span class="fr">{{(bedidx % 2) == 0 ? '正常': '报警'}}</span> -->
                      </div>
                      <div>
                        <div class="item clearfix">
                          <div class="itemL fl">
                            <p :title="bed.elder && bed.elder.name || '暂无'">姓名：{{bed.elder && bed.elder.name || '暂无'}}</p>
                            <p>年龄：{{bed.elder && bed.elder.age || '暂无'}}</p>
                            <p>性别：{{bed.elder && (bed.elder.sex == 1 ? "男" : "女") || "暂无"}}</p>
                          </div>
                          <div v-if="floor.room_code == '202' && bed.bed_code == '01'" class="itemR fl">
                            <div class="itemT">
                              心率
                              <span>{{zhongzhengobj.value2}}</span>
                            </div>
                            <div class="itemB">
                              呼吸
                              <span>{{zhongzhengobj.value3}}</span>
                            </div>
                          </div>
                          <div v-else class="itemR fl">
                            <div class="itemT">
                              心率
                              <span>78</span>
                            </div>
                            <div class="itemB">
                              呼吸
                              <span>78</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-card>
                </el-col>
                </div>

                </template>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    </div>
    <el-dialog
      title="信息面板"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="info-title">基本信息</div>
        <div class="basicInfo">
          <div class="item">姓名</div>
          <div class="item">简书成</div>
          <div class="item">性别</div>
          <div class="item">男</div>
          <div class="item">年龄</div>
          <div class="item">68</div>
          <div class="item">生日</div>
          <div class="item">1952-08-06</div>
          <div class="item">身份证</div>
          <div class="item">411503195208060971</div>
          <div class="item">婚姻状态</div>
          <div class="item">已婚</div>
          <div class="item">联系方式</div>
          <div class="item">138 4567 7890</div>
          <div class="item">宗教信仰</div>
          <div class="item">无宗教信仰</div>
          <div class="item">经济来源</div>
          <div class="item">子女赡养</div>
          <div class="item">老人类型</div>
          <div class="item">低保老人</div>
          <div class="item">医保类型</div>
          <div class="item">城镇居民医疗保险</div>
          <div class="item">医保卡号</div>
          <div class="item">0987847975</div>
          <div class="item">户籍地址</div>
          <div class="item item-spcial-1">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
          <div class="item">居住地址</div>
          <div class="item item-spcial-2">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
        </div>
        <div class="info-title">健康状况</div>
        <div class="basicInfo healthInfo">
          <div class="item">体温</div>
          <div class="item">36.8℃</div>
          <div class="item">血压</div>
          <div class="item">160mmHg，100mmHg</div>
          <div class="item">康复训练</div>
          <div class="item">无</div>
          <div class="item">疾病</div>
          <div class="item">无</div>
          <div class="item">介护等级</div>
          <div class="item">介助型</div>
          <div class="item">听力</div>
          <div class="item">正常</div>
          <div class="item">视力</div>
          <div class="item">正常</div>
          <div class="item">体重</div>
          <div class="item">68kg</div>
          <div class="item">传染病</div>
          <div class="item">无</div>
          <div class="item">疾病史</div>
          <div class="item">高血压、糖尿病</div>
          <div class="item">遗传病</div>
          <div class="item">无</div>
          <div class="item">过敏史</div>
          <div class="item">无</div>
        </div>
        <div class="info-title">床位信息</div>
        <div class="basicInfo bedInfo">
          <div class="item">床位编号</div>
          <div class="item">101房01床</div>
          <div class="item">护理类型</div>
          <div class="item">介助型</div>
          <div class="item">入住时间</div>
          <div class="item">2020-07-01</div>
          <div class="item">离住时间</div>
          <div class="item">2020-12-01</div>
          <div class="item">床位价格</div>
          <div class="item">500元/月</div>
          <div class="item">餐费价格</div>
          <div class="item">800元/月</div>
          <div class="item">护理价格</div>
          <div class="item">1500元/月</div>
          <div class="item">床位押金</div>
          <div class="item">1000元</div>
          <div class="item">设备编号</div>
          <div class="item">JZ1090908786785</div>
          <div class="item">护理人员</div>
          <div class="item">张玲玲</div>
          <div class="item">预交金额</div>
          <div class="item">10000.00元</div>
          <div class="item">预警金额</div>
          <div class="item">500.00元</div>
        </div>
        <div class="info-title">家属信息</div>
        <div class="basicInfo familyInfo">
          <div class="item">姓名</div>
          <div class="item">简书成</div>
          <div class="item">性别</div>
          <div class="item">男</div>
          <div class="item">与老人关系</div>
          <div class="item">子女</div>
          <div class="item">联系方式</div>
          <div class="item">138 7869 8729</div>
          <div class="item">身份证</div>
          <div class="item item-spcial-1">411503195208060971</div>
          <div class="item">居住地址</div>
          <div class="item item-spcial-2">
            河南省信阳市平桥区恒大名都1幢1019室
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getOlder } from "@/api/oldermanager";
  import { getList } from "@/api/bedList";
  import { getBuilding, getFloor } from "@/api/building";
  import mixins from '@/utils/mixins.js';
  import * as Api_ysxroom from "@/api/ysxroom";
  export default {
    name: "Index",
    components: {},
    mixins: [mixins],
    data() {
      return {
        dialogVisible: false,
        selectArr: [0, 1, 2, 3, 4, 5],
        icon: ["bed", "pray"],
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        tags: [
          { name: "全部在床(100)", color: "#00BF11", id: 0 },
          { name: "呼叫报警(2)", color: "#E5362A", id: 1 },
          { name: "尿湿报警(5)", color: "rgb(224, 199, 32)", id: 1 },
        ],
        formData: {},
        selectForm: {},
        activename: "",
        flooractivename: "",
        buildingData: [],
        floorData: [],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getBuildingData();
      //尉氏县网关登录
      Api_ysxroom.ysxShowLogin({host_id: "40aa568e24d5"})
    },
    methods: {
      handleFilter(e) {
        let id = e.currentTarget.dataset.id;
        console.log(id);
        if (this.selectArr.indexOf(parseInt(id)) === -1) {
          this.selectArr.push(parseInt(id));
        }
      },
      handleClose(id) {
        if (this.selectArr.indexOf(parseInt(id)) !== -1) {
          this.selectArr.splice(this.selectArr.indexOf(parseInt(id)), 1);
        }
      },
      handleCardInfo() {
        this.dialogVisible = true;
      },
      closeDialog() {
        this.dialogVisible = false;
      },
      handleSelectBuilding(tab) {
        let params = {
          building_id: tab.$attrs.datafloorid,
        };
        if (tab.$attrs.datafloorid) this.getFloorData(params);
      },
      handleTabFloorClick(tab) {
        this.loadingWrap = true;
        this.getTableData(tab.$attrs.datafloorid);
      },
      handleElderDetail(id) {
        if (id == 0) return;
        let params = {
          id: id,
        };
        getOlder("get", params).then((resp) => {
          if (resp.code === 200) {
            this.elderTk = true;
            this.elderData = resp.data;
          }
        });
      },
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list.reverse() || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
        };
        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data?.list || [];
            this.bedPageDataList = data;
            this.loadingWrap = false;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: flex;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .el-tag {
        line-height: 34px;
        color: #333;
        background: none;
        border: 1px solid #dddfe7;

        &.active {
          line-height: 36px;
          color: #fff;
          border: none;
        }
      }

      .el-tag--medium {
        height: 36px;
        font-size: 14px;
        cursor: pointer;

        ::v-deep {
          .el-tag__close {
            color: #fff;
          }
        }
      }
    }

    @media only screen and (min-width: 1600px) {
      .bed-list-wrap7{
        ::v-deep{
          .el-col-lg-6, .el-col-xl-4 {
            width: 14.28571%;
          }
        }
      }
      .bed-list-wrap3 {
        width: 45%;
        float: left;
        ::v-deep{
          .el-col-xl-4, .el-col-lg-6 {
            width: 33.3333%;
          }
        }
      }
      .bed-list-wrap2 {
        width: 29%;
        float: left;
        ::v-deep{
          .el-col-xl-4, .el-col-lg-6 {
            width: 50%;
          }
        }

      }
    }

    @media only screen and (min-width: 1000px) and (max-width: 1600px){
      .bed-list-wrap2 {
        width: 43%;
        float: left;
        ::v-deep{
          .bed-el-col {
            width: 50%;
          }
        }
      }
    }

    .bed-list-wrap7, .bed-list-wrap3, .bed-list-wrap2 {
      display: flex;
      border: 1px solid #18ba39;
      margin: 20px;
      padding: 10px;
      border-radius: 20px;
      background: #f5f7fa;
      &:hover{
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      }
    }

    // @media only screen and (min-width: 996px) {
    //   .bed-el-col{
    //     width: 25%;
    //   }
    // }





    .el-card {
      margin-bottom: 0;
      cursor: pointer;
      border-radius: 8px;

      ::v-deep {
        .el-card__header {
          height: 48px;
          padding: 0 20px;
          overflow: hidden;
          line-height: 48px;
          background: #18ba39;
        }

        .el-card__body {
          height: 140px;
          padding: 0;

          .item {
            height: 100%;

            .itemL {
              box-sizing: border-box;
              width: 55%;
              padding: 20px 10px 0;
              border-right: 1px solid #dddfe7;

              p {
                margin-bottom: 16px;
                font-size: 16px;
                line-height: 24px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .itemR {
              width: 45%;
              height: 140px;
              font-size: 14px;
              line-height: 24px;
              color: #333;

              .itemT {
                height: 50%;
                padding-left: 12px;
                line-height: 70px;
                border-bottom: 1px solid #dddfe7;

                span {
                  font-size: 30px;
                  color: #333;
                }
              }

              .itemB {
                height: 50%;
                padding-left: 12px;
                line-height: 70px;

                span {
                  font-size: 30px;
                  color: #333;
                }
              }
            }
          }
        }
      }
    }

    .el-card.colorType0 {
      ::v-deep {
        .el-card__header {
          background: #999;
        }
      }
    }

    .el-card.colorType1 {
      ::v-deep {
        .el-card__header {
          background: #e0c720;
        }
      }
    }

    .el-card.colorType2 {
      ::v-deep {
        .el-card__header {
          background: #18ba39;
        }
      }
    }

    .el-card.colorType3 {
      ::v-deep {
        .el-card__header {
          background: #c400d2;
        }
      }
    }

    .el-card.colorType4 {
      ::v-deep {
        .el-card__header {
          background: #666;
        }
      }
    }

    .el-card.colorType5 {
      ::v-deep {
        .el-card__header {
          background: #999;
        }
      }
    }

    .header {
      position: relative;
      color: #fff;

      .header_icon {
        position: absolute;
        top: 50%;
        left: 0;
        font-size: 24px;
        transform: translateY(-50%);
      }

      span {
        display: block;
        font-size: 18px;
        text-align: center;
      }
    }
  }

  .dialogForm {
    ::v-deep {
      .el-dialog {
        border-radius: 12px;

        .el-dialog__body {
          padding-top: 12px;
        }
      }
    }

    .dialog-main {
      .info-title {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        color: #2279ff;
      }

      .basicInfo {
        display: grid;
        grid-template-rows: repeat(4, 40px);
        grid-template-columns: 9% 16% 9% 16% 9% 16% 9% 16%;
        margin-bottom: 12px;
        border-bottom: 1px solid #e1e1e1;
        border-left: 1px solid #e1e1e1;

        .item {
          line-height: 40px;
          text-align: center;
          border-top: 1px solid #e1e1e1;
          border-right: 1px solid #e1e1e1;

          &:nth-child(even) {
            font-size: 16px;
            color: #333;
          }

          &:nth-child(odd) {
            font-size: 16px;
            color: #999;
          }
        }

        .item-spcial-1 {
          grid-column-start: 2;
          grid-column-end: 5;
        }

        .item-spcial-2 {
          grid-column-start: 6;
          grid-column-end: 9;
        }
      }

      .healthInfo {
        grid-template-rows: repeat(3, 40px);
      }

      .bedInfo {
        grid-template-rows: repeat(3, 40px);
      }

      .familyInfo {
        grid-template-rows: repeat(2, 40px);
      }
    }
  }
</style>
